import { Drawer, Form, Button, Col, Row, Input, Select } from 'antd';
import React, { Component } from 'react';
import { EditOutlined } from '@ant-design/icons';

const { Option } = Select;

export default class EditQuotation extends Component {
	constructor(props) {
		super(props);
		const { handleEditClick } = this.props;
		this.handleEditClick = handleEditClick;
		this.state = { visible: false };
	}

	showDrawer = () => {
		this.setState({
			visible: true
		});
	};

	onClose = () => {
		this.setState({
			visible: false
		});
	};

	onFinish = (value) => {
		this.handleEditClick(value);
		this.onClose();
	};

	render() {
		const { quotation } = this.props;
		return (
			<div>
				<Button type="link" onClick={this.showDrawer} icon={<EditOutlined />}>
					编辑
				</Button>
				<Drawer
					title="修改员工信息"
					width={500}
					onClose={this.onClose}
					visible={this.state.visible}
					bodyStyle={{ paddingBottom: 80 }}
				>
					<Form layout="vertical" hideRequiredMark onFinish={this.onFinish}>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item name="id" label="账号" initialValue={quotation.id}>
									<Input disabled />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="name"
									label="姓名"
									initialValue={quotation.name}
									rules={[ { required: true, message: '请输入姓名' } ]}
								>
									<Input />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item
									name="authority"
									label="部门权限"
									rules={[ { required: true, message: '请选择部门' } ]}
									initialValue={quotation.authority}
								>
									<Select placeholder="必选项">
										<Option value="all">总管</Option>
										<Option value="admin">人事部</Option>
										<Option value="goods">产品部</Option>
										<Option value="quotation">销售部</Option>
										<Option value="stock">仓储部</Option>
										<Option value="delivery">物流部</Option>
										<Option value="finance">财务部</Option>
									</Select>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="authority_level"
									label="权限等级"
									rules={[ { required: true, message: '请选择权限等级' } ]}
									initialValue={quotation.authority_level}
								>
									<Select placeholder="必选项">
										<Option value={1}>高</Option>
										<Option value={0}>低</Option>
									</Select>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item name="phone" label="电话" initialValue={quotation.phone}>
									<Input />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item name="email" label="邮箱" initialValue={quotation.email}>
									<Input />
								</Form.Item>
							</Col>
						</Row>

						<Row gutter={24}>
							<Col span={12}>
								<Form.Item name="status" label="状态" initialValue={quotation.status}>
									<Select>
										<Option value="正常">正常</Option>
										<Option value="封禁">封禁</Option>
									</Select>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item name="avatar" label="头像">
									<Input placeholder="默认" />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} />

						<Form.Item>
							<div
								style={{
									textAlign: 'right'
								}}
							>
								<Button onClick={this.onClose} style={{ marginRight: 8 }}>
									取消
								</Button>
								<Button htmlType="reset" style={{ marginRight: 8 }}>
									重置
								</Button>
								<Button type="primary" htmlType="submit">
									提交
								</Button>
							</div>
						</Form.Item>
					</Form>
				</Drawer>
			</div>
		);
	}
}
